<template>
  <div>
    <div class="detail-info" style="margin-top: 43px">
      <div class="form-item">
        <h4>发放基础信息</h4>
        <el-form label-width="180px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属分公司">
                <span>{{this.dt.branchName}}</span>
              </el-form-item>
              <el-form-item label="所属部门">
                <span>{{this.dt.departName}}</span>
              </el-form-item>
              <el-form-item v-if="this.dt.providerRatio !== 0" label="供应商占比">
                <span>{{this.dt.providerRatio}}</span><span>%</span>
              </el-form-item>
              <el-form-item label="促销费用">
                <span>{{this.dt.cxName}}</span>
              </el-form-item>
              <el-form-item label="活动名称">
                <span>{{this.dt.batchName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户选择">
                <span v-if="this.dt.doAction === 1">客户筛选</span>
                <span v-if="this.dt.doAction === 2">文件导入</span>
                <span v-if="this.dt.doAction === 3">回款返券</span>
              </el-form-item>
              <el-form-item v-if="this.dt.doAction === 1" label="客资类型">
                <span v-if="this.dt.customerType === 1">普通超市</span>
              </el-form-item>
              <el-form-item v-if="this.dt.doAction === 1" label="客户等级">
                <span v-if="this.dt.customerLevel === 0">全部</span>
                <span v-if="this.dt.customerLevel === 1">普通会员</span>
                <span v-if="this.dt.customerLevel === 2">银牌会员</span>
                <span v-if="this.dt.customerLevel === 3">金牌会员</span>
                <span v-if="this.dt.customerLevel === 4">钻石会员</span>
              </el-form-item>
              <el-form-item v-if="this.dt.doAction !== 1" label="上传文件">
                <span>{{this.dt.fileName}}</span>
                <el-button type="primary" size="small" style="margin-left:20px;" @click="exportFile">下载此文件</el-button>
              </el-form-item>
              <el-form-item label="发放方式">
                <span v-if="this.dt.sendType === 1">手动</span>
                <span v-if="this.dt.sendType === 2">自动</span>
              </el-form-item>
              <el-form-item v-if="this.dt.sendType === 2" label="发放时间">
                <span>{{this.dt.sendTime}}</span>
              </el-form-item>
              <el-form-item v-if="this.dt.doAction === 3" label="最大面值">
                <span>{{this.dtDetail[0].maxFaceValue}}</span>
              </el-form-item>
              <el-form-item v-if="this.dt.doAction === 3" label="有效期类型">
                <span v-if="this.dtDetail[0].expiryDateType === 1">时间段</span>
                <span v-if="this.dtDetail[0].expiryDateType === 2">截止时间</span>
                <span v-if="this.dtDetail[0].expiryDateType === 3">天数</span>
              </el-form-item>
              <el-form-item v-if="this.dt.doAction === 3" label="有效期">
                <span v-if="this.dtDetail[0].expiryDateType === 1">{{timeDeltSecond(this.dtDetail[0].startTime)}}-{{timeDeltSecond(this.dtDetail[0].endTime)}}</span>
                <span v-if="this.dtDetail[0].expiryDateType === 2">{{timeDeltSecond(this.dtDetail[0].endTime)}}</span>
                <span v-if="this.dtDetail[0].expiryDateType === 3">{{this.dtDetail[0].days}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div v-if="this.dt.doAction !== 3" class="detail-info" style="margin-top: 43px">
      <div class="form-item">
        <h4>优惠券信息</h4>
        <el-table :data="this.dtDetail" border>
          <el-table-column prop="ticketId" label="优惠券ID" align="center" width="100"></el-table-column>
          <el-table-column prop="ticketName" label="优惠券名称" align="center" min-width="200"></el-table-column>
          <el-table-column label="优惠券类型" align="center" width="150">
            <template scope="scope">
              <span v-if="scope.row.ticketType === 1">现金券</span>
              <span v-if="scope.row.ticketType === 2">满减券</span>
              <span v-if="scope.row.ticketType === 3">实物券</span>
              <span v-if="scope.row.ticketType === 4">品牌现金券</span>
            </template>
          </el-table-column>
          <el-table-column prop="ticketMoney" label="面值" align="center" width="80"></el-table-column>
          <el-table-column prop="useCondition" label="满多少元可用" align="center" width="120"></el-table-column>
          <el-table-column prop="numLimit" label="满多少件可用" align="center"></el-table-column>
          <el-table-column prop="expiryDateType" label="有效期类型" align="center" width="120">
            <template scope="scope" >
              <span v-if="scope.row.expiryDateType === 1">时间段</span>
              <span v-if="scope.row.expiryDateType === 2">截止时间</span>
              <span v-if="scope.row.expiryDateType === 3">天数</span>
            </template>
          </el-table-column>
          <el-table-column label="有效期" align="center" min-width="150">
            <template scope="scope">
              <span v-if="scope.row.expiryDateType === 1">{{timeDeltSecond(scope.row.startTime)}}-{{timeDeltSecond(scope.row.endTime)}}</span>
              <span v-if="scope.row.expiryDateType === 2">{{timeDeltSecond(scope.row.endTime)}}</span>
              <span v-if="scope.row.expiryDateType === 3">{{scope.row.days}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ticketTimes" label="每人/数量" align="center" width="90"></el-table-column>
          <el-table-column prop="ticketUser" label="建券人" align="center" width="100"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- <div v-if="this.dt.doAction === 2" class="detail-info" style="margin-top: 50px">
      <div class="form-item">
        <h4>发放明细</h4>
        <el-table :data="dtSendStatistics" border>
          <el-table-column label="优惠券类型" align="center">
            <template scope="scope">
              <span v-if="scope.row.ticketType === 1">现金券</span>
              <span v-if="scope.row.ticketType === 2">满减券</span>
              <span v-if="scope.row.ticketType === 3">实物券</span>
              <span v-if="scope.row.ticketType === 4">品牌现金券</span>
            </template>
          </el-table-column>
          <el-table-column prop="sendStatistics" label="发放总张数" align="center"></el-table-column>
          <el-table-column prop="personStatistics" label="发放总人数" align="center"></el-table-column>
          <el-table-column prop="maxTicketValue" label="最大面值" align="center"></el-table-column>
          <el-table-column prop="maxTicketOfPerson" label="最多获得张数/人" align="center"></el-table-column>
          <el-table-column prop="moneyStatistics" label="总金额" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button type="text" @click="checkSendDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div> -->
    <!-- <el-dialog title="发放明细" :visible.sync="sendDetailDialog" size="large">
      <el-table :data="sendDetailCheck" v-if="sendDetailDialog" border style="margin-top:20px" v-loading="sendDetailLoading">
        <el-table-column label="序号" align="center" width="50">
          <template scope="scope">
            <span>{{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="分公司ID" prop="branchId" align="center" width="80"></el-table-column>
        <el-table-column label="商户ID" prop="memberId" align="center" width="70"></el-table-column>
        <el-table-column label="优惠券ID" prop="ticketId" align="center" width="80"></el-table-column>
        <el-table-column label="优惠券名称" prop="ticketName" align="center" min-width="100"></el-table-column>
        <el-table-column label="类型" align="center">
          <template scope="scope">
            <span v-if="scope.row.ticketType === 1">现金券</span>
            <span v-if="scope.row.ticketType === 2">满减券</span>
            <span v-if="scope.row.ticketType === 3">实物券</span>
            <span v-if="scope.row.ticketType === 4">品牌现金券</span>
          </template>
        </el-table-column>
        <el-table-column v-if="this.sendDetailType === 3" label="商品ID" prop="productId" align="center" width="80"></el-table-column>
        <el-table-column v-if="this.sendDetailType === 3" label="商品名称" prop="productName" align="center" width="80"></el-table-column>
        <el-table-column v-if="this.sendDetailType === 3" label="成本价" prop="price" align="center" width="80"></el-table-column>
        <el-table-column v-if="this.sendDetailType === 1 || this.sendDetailType === 2 || this.sendDetailType === 4" label="面值" prop="ticketMoney" align="center" width="50"></el-table-column>
        <el-table-column v-if="this.sendDetailType === 1 || this.sendDetailType === 2" label="满多少可用" prop="fullUse" align="center" width="100"></el-table-column>
        <el-table-column v-if="this.sendDetailType === 1" label="SKU数" prop="sku" align="center" width="70"></el-table-column>
        <el-table-column label="数量" prop="ticketCount" align="center" width="50"></el-table-column>
        <el-table-column label="有效期类型" prop="expiryDateType" align="center" width="100"></el-table-column>
        <el-table-column label="天数" prop="days" align="center" width="50"></el-table-column>
        <el-table-column label="有效期开始时间" prop="startTime" align="center" width="110"></el-table-column>
        <el-table-column label="有效期结束时间" prop="endTime" align="center" width="110"></el-table-column>
        <el-table-column v-if="this.sendDetailType === 1" label="补差费用ID" prop="aaaaaa" align="center" width="70"></el-table-column>
        <el-table-column label="促销费用名称" prop="aaaaaa" align="center" width="70"></el-table-column>
        <el-table-column label="促销费用类型" prop="aaaaaa" align="center" width="70"></el-table-column>
        <el-table-column label="供应商" prop="aaaaaa" align="center" width="80"></el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange($event)"
        :page-size="Number(sendDetailPageSize)"
        layout="total, prev, pager, next"
        :total="Number(total)"
        style="padding-top:10px;text-align: right;">
      </el-pagination>
    </el-dialog> -->
    <div class="detail-info">
      <div class="form-item" style="margin-bottom:0">
        <h4>系统通知</h4>
        <el-row>
          <span style="font-weight:600">{{this.dt.messageTitle}}</span>
        </el-row>
        <el-row>
          <span>{{this.dt.messageDetails}}</span>
        </el-row>
      </div>
    </div>
    <div class="detail-info" style="margin-top: 43px;margin-bottom:80px">
      <div class="form-item">
        <h4>审核信息</h4>
        <el-table :data="checkInfo" border>
          <el-table-column prop="auditor" label="审核人名称" align="center"></el-table-column>
          <el-table-column prop="content" label="任务内容" align="center"></el-table-column>
          <el-table-column prop="resultName" label="审核结果" align="center"></el-table-column>
          <el-table-column prop="opinion" label="审核意见" align="center"></el-table-column>
          <el-table-column prop="auditTime" label="审核时间" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
  import { activity } from '../../../../config/proxy.js'
  import { apiHost, apiURL } from '../../../../config/settings.js'
  import { mapState } from 'vuex'
  import mixins from '../../../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        dt: {}, // 定投基本信息
        dtDetail: [], // 定投优惠券信息
        dtSendStatistics: [], // 定投发放信息
        couponInfoList: [], //
        checkInfo: [], // 审核信息
        sendDetailDialog: false, // 发放明细弹框
        sendDetailCheck: [], // 查看发放明细数组
        sendDetailType: '', // 发放明细类型
        selectSendDetailRow: {}, // 发送明细查看时选中的行
        sendDetailLoading: false, // 发放明细加载
        sendDetailPageSize: '20',
        sendDetailPage: '1',
        total: '0',
        id: '',
        showBranchName: '', // 页面展示的公司名称
        showDeptName: '', // 页面展示的部门名称
        exportData: {} // 导出文件data
      }
    },
    methods: {
      searchDetail (id) {
        console.log
        activity.yhqhd.dtgl.detail({id: id}, (res) => {
          console.log(res, '详情')
          if (res.message === 'ok') {
            this.dt = res.content.dt
            // this.showBranchName = res.content.dt.branchName // 创建时公司是返回的公司名称
            // this.showDeptName = res.content.dt.departName
            this.exportData.activityId = res.content.dt.id
            this.exportData.doAction = res.content.dt.doAction
            this.checkInfo = res.content.checkInfo
            this.dtSendStatistics = res.content.dtSendStatistics ? res.content.dtSendStatistics : ''
            this.id = res.content.id
            if (res.content.dtDetail && res.content.dtDetail !== null) {
              this.dtDetail = res.content.dtDetail
              for (var index = 0; index < this.dtDetail.length; index++) {
                var element = this.dtDetail[index]
                this.dtDetail[index].startTime = this.timeDeltSecond(element.startTime)
                this.dtDetail[index].endTime = this.timeDeltSecond(element.endTime)
              }
            }
          } else {
            this.message('查看详情失败', 'error')
          }
        })
      },
      checkSendDetail (row) { // 查看发送明细
        // console.log(this.$store.state.tab.uid)
        this.selectSendDetailRow = this.row
        this.sendDetailLoading = true
        this.sendDetailDialog = true
        this.sendDetailCheck = []
        var _data = {
          parentId: this.id,
          ticketType: row.ticketType,
          salesCosts: this.dt.salesCosts,
          pageSize: this.sendDetailPageSize,
          page: this.sendDetailPage
        }
        this.sendDetailType = row.ticketType
        var self = this
        setTimeout(function () {
          activity.yhqhd.dtgl.sendDetail(_data, (res) => {
            if (res.message === 'ok') {
              self.sendDetailLoading = false
              self.sendDetailCheck = res.content.content
              // this.message('查询', 'success')
              self.total = res.content.count
              self.sendDetailPage = res.content.page
            } else {
              self.message('查询失败', 'error')
            }
            console.log(res)
          })
        }, 500)
        console.log(_data)
      },
      exportFile () { // 导出
        var _data = this.exportData
        console.log(_data, 'www')
        var form = document.createElement('form')
        document.body.appendChild(form)
        form.method = 'post'
        form.action = 'http://' + apiHost.newCms + ':20000' + apiURL.timeingOn_export
        // console.log(params.length)
        for (var i in _data) {
          var newInput = document.createElement('input')
          newInput.setAttribute('name', i)
          newInput.setAttribute('type', 'hidden')
          newInput.setAttribute('value', _data[i])
          form.appendChild(newInput)
        }
        form.submit()
        form.remove()
      },
      handleCurrentChange (val) {
        this.sendDetailPage = val
        this.checkSendDetail(this.selectSendDetailRow)
      },
      timeDeltSecond (d) { // 时间去秒
        if (d) {
          return d.split(' ')[0]
        }
      },
      message (text, type) { // 消息提示
        this.$message({
          showClose: true,
          message: text,
          type: type
        })
      }
    },
    computed: mapState({
      userName: function (state) {
        if (!state.user.info.user_name) {
          this.$store.dispatch('SET_TOKEN')
        }
        return state.user.info.user_name
      },
      branchName: function (state) {
        return state.user.info.branchId === 1 ? '总公司' : state.user.info.branchName
      },
      branchId: function (state) {
        return state.user.info.branchId
      },
      deptName: function (state) {
        return state.user.info.parOrgName
      },
      deptId: function (state) {
        return state.user.info.or_org_id
      }
    }),
    created () {
      this.searchDetail(this.$store.state.tab.uid)
    }
  }
</script>
